<template>
    <div>
    
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
                <ButtonGroup>
                    <Button @click="changeType(1)" :class="{active1: formValidate.type ===1 } ">新闻分类</Button>
                    <Button @click="changeType(2)" :class="{active1: formValidate.type ===2 } ">上传分类</Button>
                    <Button @click="changeType(3)" :class="{active1: formValidate.type ===3 } ">产品分类</Button>
                </ButtonGroup>
                <Tree :data="baseData" @on-select-change="getCheckedNodes"></Tree>
            </div>
        </div>
        <div class="row">
            <!-- <div  style="text-align:center;padding:5px 0;">
                <Button type="info" @click="addRootNode">添加根节点</Button>
                <Button type="info" @click="editNode">修改</Button>
                <Button type="info" @click="remove1">删除</Button>
            </div> -->
            <div >
                <Form ref="formValidate" label-position="left" :label-width="100">
                    <FormItem label="parentId">
                        <Input type="text" name="parentId" id="parentId" v-model="formValidate.parentId" ></Input>
                    </FormItem>
                    <FormItem label="节点名称">
                        <Input id="title" name="text" v-model="formValidate.title"/></FormItem>
                    </FormItem>
                </Form>

                <div style="text-align:center;padding:5px 0;">
                    <Button type="success" @click="submitForm" >添加根节点</Button>
                    <Button type="warning" @click="clearForm" >重置</Button>
                    <Button type="warning" @click="remove1" >删除</Button>
                </div>
            </div>
        </div>
    </div>
    </div>
</template>

<script>

    export default {
        data () {
            return {
                baseData: [],
                formValidate:{
                    title:'',
                    type:1,
                    parentId:null
                },
                nodeId:null
            }
        },
        methods:{
            changeType(type){
                this.getTree(type)
            },
            getTree(type){
                this.formValidate.type=type;
                this.$http({
                    method:'GET',
                    url:'http://localhost:3000/cate/list/'+type
                }).then((response) => {
                    this.baseData=response.data;
                })
            },
            addRootNode(){
                this.formValidate.parentId=null;
                $('#parentId').val(this.formValidate.parentId)
                console.log($('#parentId').val())
            },
            editNode(){
                $('#parentId').val(this.formValidate.parentId)
                console.log($('#parentId').val())




            },
            submitForm(){
                if($('#parentId').val()==''){//添加根节点,,
                    this.$http({
                        method:'POST',
                        url:'http://localhost:3000/cate/data',
                        data:this.formValidate
                    }).then((response) => {
                        this.$http({
                            method:'GET',
                            url:'http://localhost:3000/cate/list/'+this.formValidate.type
                        }).then((response) => {
                            this.baseData=response.data;
                        })
                    })
                }else{
                    this.$http({
                        method:'post',
                        url:'http://localhost:3000/cate/data/'+this.formValidate.parentId,
                        data:{title:this.formValidate.title}
                    }).then((response) => {
                        console.log(response)
                        this.$http({
                            method:'GET',
                            url:'http://localhost:3000/cate/list/'+this.formValidate.type
                        }).then((response) => {
                            console.log(response)
                            this.baseData=response.data;
                        })
                    })
                }
            },
            getCheckedNodes(arr){
                // console.log(arr)/
                this.formValidate.parentId=arr[0]._id
            },
            clearForm(){
                this.formValidate.parentId=null;
                this.formValidate.title='';
            },
            remove1(){
                this.$http({
                    method:'delete',
                    url:'http://localhost:3000/cate/data/'+this.formValidate.parentId,
                    data:this.formValidate
                }).then((response) => {
                    this.$http({
                        method:'GET',
                        url:'http://localhost:3000/cate/list/'+this.formValidate.type
                    }).then((response) => {
                        this.baseData=response.data;
                    })
                })
            }
        },
        created(){
            this.getTree(1)
        }
    }
</script>

<style >
    .active1{
        background: green;
    }
</style>